<nz-modal [(nzVisible)]="isVisible" [nzTitle]="title" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
  <form nz-form [formGroup]="validateForm">
    <nz-form-item>
      <nz-form-label [nzSpan]="7" nzRequired>用户名</nz-form-label>
      <nz-form-control [nzSpan]="12" nzValidatingTip="等待服务器校验" [nzErrorTip]="userErrorTpl">
        <input nz-input formControlName="username" placeholder="请输入用户名" />
        <!-- 校验数据 -->
        <ng-template #userErrorTpl let-control>
          <ng-container *ngIf="control.hasError('required')">
            请输入用户名
          </ng-container>
          <ng-container *ngIf="control.hasError('duplicated')">
            该用户名已经存在
          </ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item *ngIf="!isEdit">
      <nz-form-label [nzSpan]="7" nzRequired>密码</nz-form-label>
      <div>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="passwordErrorTpl">
          <input nz-input type="password" formControlName="password" placeholder="请输入密码" />
          <!-- 校验数据 -->
          <ng-template #passwordErrorTpl let-control>
            <ng-container *ngIf="control.hasError('required')">请输入密码</ng-container>
            <ng-container *ngIf="control.hasError('minlength')">密码长度至少3位数</ng-container>
          </ng-template>
        </nz-form-control>
      </div>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="7">邮箱</nz-form-label>
      <nz-form-control [nzSpan]="12" [nzErrorTip]="emailErrorTpl">
        <input nz-input formControlName="email" placeholder="请输入邮箱" type="email" />
        <ng-template #emailErrorTpl let-control>
          <ng-container *ngIf="control.hasError('email')">
            邮箱格式错误
          </ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="7">手机号码</nz-form-label>
      <nz-form-control [nzSpan]="12" [nzErrorTip]="mobileErrorTpl">
        <input nz-input formControlName="mobile" placeholder="请输入手机号码" type="text" />
        <ng-template #mobileErrorTpl let-control>
          <ng-container *ngIf="control.hasError('mobile')">
            手机号码格式错误
          </ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="7">状态</nz-form-label>
      <nz-form-control [nzSpan]="12">
        <nz-select name="select-validate" [ngModel]="status" formControlName="status">
          <nz-option nzValue="0" nzLabel="禁用"></nz-option>
          <nz-option nzValue="1" nzLabel="可用"></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="7">平台</nz-form-label>
      <nz-form-control nzSpan="12">
        <input nz-input formControlName="platform" placeholder="请输入该用户所在平台" type="text" />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="7">是否为超级管理员</nz-form-label>
      <nz-form-control [nzSpan]="12">
        <nz-select name="select-validate" [ngModel]="isSuper" formControlName="is_super">
          <nz-option nzValue="0" nzLabel="否"></nz-option>
          <nz-option nzValue="1" nzLabel="是"></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-modal>
